/**
 * @file: 新增/编辑门店弹窗
 * @author: Lengxx
 * @date: 2024-07-12
 */
<template>
  <BasicModal
    v-bind="$attrs"
    :title="isAddModal ? '新增门店' : '编辑门店'"
    :loading="addLoading || optLoading || editLoading"
    @ok="onModalConfirm"
    @register="register"
  >
    <Form :model="formItem" :labelCol="{ style: { width: '100px' } }" >
      <FormItem label="门店名称" v-bind="validateInfos.name">
        <Input v-model:value="formItem.name" />
      </FormItem>
      <FormItem label="门店位置" v-bind="validateInfos.address">
        <Input v-model:value="formItem.address" />
      </FormItem>
      <FormItem label="电话号码" v-bind="validateInfos.phone">
        <Input v-model:value="formItem.phone" />
      </FormItem>
      <FormItem label="房间数" v-bind="validateInfos.roomCount">
        <InputNumber v-model:value="formItem.roomCount" />
      </FormItem>
      <FormItem label="门店大小">
        <InputNumber v-model:value="formItem.size" />
      </FormItem>
      <FormItem label="门店状态">
        <Select v-model:value="formItem.status">
          <SelectOption 
          v-for="(item, index) in storeSatusOpts" 
          :key="index" 
          :value="item.value">{{ item.label }}</SelectOption>
        </Select>
      </FormItem>
      <FormItem label="备注">
        <Textarea v-model:value="formItem.remark" />
      </FormItem>
    </Form>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { get, omit } from 'lodash-es';
  import * as api from '@/api/permisson/store';
  import { getDictOpts } from '@/api/dictionary';
  import { IAddStoreData, IStoreListItem, IStoreStatusEnums } from '@/api/permisson/model/store';

  import { useRequest } from '@vben/hooks';
  import { useMessage } from '@/hooks/web/useMessage'

  import { BasicModal, useModalInner } from '@/components/Modal';
  import { Form, FormItem, Input, Textarea, InputNumber, Select, SelectOption } from 'ant-design-vue';
  import { AddStoreFormRules } from '../settings';
  import { ModalTypeEnum } from '@/enums/appEnum';
  
  const { createMessage } = useMessage();
  
  const { loading: addLoading, runAsync: addStore } = useRequest(api.addStore, { manual: true });
  const { loading: editLoading, runAsync: editStore } = useRequest(api.editStoreInfo , { manual: true });
  const { loading: optLoading, data: storeSatusOpts, runAsync: getStoreStatusOpts } = useRequest(getDictOpts, { manual: true })


  const emits = defineEmits<{
    (e: 'submit', data?: any): void
  }>()

  const isAddModal = ref(true);

  const formItem = ref<Partial<IStoreListItem>>({
    name: '',
    address: '',
    roomCount: 0,
    size: '',
    remark: '',
    phone: '',
    status: IStoreStatusEnums.Stop,
    id: ''
  });

  const { resetFields, validate, validateInfos } = Form.useForm(formItem, AddStoreFormRules);

  const [register] = useModalInner(async (data) => {
    const modalType = get(data, 'modelType', ModalTypeEnum.Add);
    await getStoreStatusOpts('StoreStatus');

    if (modalType === ModalTypeEnum.Add) {
      resetFields();
      isAddModal.value = true;
    } else {
      formItem.value = omit(data, 'modelType') as IStoreListItem;
      isAddModal.value = false;
    }
  });

  async function onModalConfirm() {
    await validate();
    if (isAddModal.value) {// 新增
      await addStore(omit(formItem.value, 'id') as IAddStoreData);
      createMessage.success('新增成功');
      emits('submit')
    } else {// 编辑
      if (formItem.value.id) {
        await editStore(formItem.value as IStoreListItem);
        createMessage.success('编辑成功');
        emits('submit');
      } else {
        createMessage.error('id为空!');
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
